<template>
  <div class="container">
    <Header v-if="isHome" v-bind:isBack="isBack" :title="title"></Header>
    <!-- 海选列表数据 -->
    <div class="sea-election">
      <div class="items" v-for="(item,index) in seaList" :key="index" @click="toDetails(item)">
        <div class="imgs">
          <img :src="item.audition_activity_cover" alt />
        </div>
        <div class="title fs-32">{{item.audition_activity_name}}</div>
        <div class="time fs-26">报名时间：{{item.enter_start_time}}-{{item.enter_end_time}}</div>
        <div class="vote fs-26">投票时间：{{item.vote_start_time}}-{{item.vote_end_time}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import Footer from "@/components/footer-nav";
export default {
  name: "my-activity",
  data() {
    return {
      title: "报名的活动",
      isBack: true,
      isHome: true,
      seaList: [] //活动列表数据
    };
  },
  components: {},
  methods: {
    // 获取我报名的活动
    getMyActivity() {
      const url = this.$host1 + `home/audition/myAuditionActivityList`;
      this.$axios
        .get(url)
        .then(res => {
          console.log(res.data, "---res.data--");
          if (res.data.code == 200) {
            this.seaList = res.data.data.list;
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 去海选活动详情页面
    toDetails(item) {
      this.$router.push({
        path: "/index/sea-activity",
        query: { id: item.audition_activity_vote_time_id }
      });
    }
  },
  created() {
    this.getMyActivity();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.container {
  padding-top: 1rem;
  box-sizing: border-box;
  .sea-election {
    padding-bottom: 1rem;
    box-sizing: border-box;
    .items {
      padding: 0.44rem 0.25rem 0.34rem 0.23rem;
      box-sizing: border-box;
      background-color: #fff;
      .imgs {
        width: 7.02rem;
        height: 4rem;
        margin-bottom: 0.39rem;
        border-radius: 0.18rem;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .title {
        font-weight: 500;
        color: rgba(68, 68, 68, 1);
        line-height: 0.48rem;
      }
      .time,
      .vote {
        font-weight: 500;
        color: rgba(153, 153, 153, 1);
        line-height: 0.48rem;
      }
    }
  }
}
</style>
